<template>
  <div class="app-container">
    <div class="card-style">
      <el-row>
        <el-col :span="21">
          <i class="el-icon-search"></i>
          <span class="search-title">筛选搜索</span>
        </el-col>
        <el-col :span="3" style="display: flex;justify-content: end">
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        </el-col>
      </el-row>
      <el-form :inline="true" :model="body" ref="queryForm" size="small" label-width="140px">
        <el-form-item label="省市区:" v-if="isShowSelected">
          <area-select :level="2" :placeholders="['选择省', '选择市', '选择区']" type="text" v-model="selected" :data="areaData"
            @change="changeArea"></area-select>
        </el-form-item>
        <el-form-item prop="name" label="小区:">
          <el-select v-model="body.name" placeholder="请选择">
            <el-option v-for="(item, index) in communityOption" :key="index" :label="item.name"
              :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <div style="display: flex;justify-content: space-between;align-items: center;">
        <div>
          <i class="el-icon-tickets"></i>
          <span style="padding-left: 6px;">数据列表</span>
        </div>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addArea">新增</el-button>
      </div>
    </el-card>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="序号" v-slot="{ $index }" fixed="left" align="center">
        {{ getSerialNumber($index) }}
      </el-table-column>
      <el-table-column property="parentName" label="地址" align="center">
      </el-table-column>
      <el-table-column property="name" label="小区" align="center">
      </el-table-column>
      <el-table-column property="type" label="类型" align="center">
      </el-table-column>
      <el-table-column property="createTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pagination v-show="true" @pagination="handlePagination" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" />
    <!-- 新增弹框 -->
    <area-dialog v-if="addDialogVisible" title="新增区域" :dialogVisible="addDialogVisible"
      @close="handleDialogClose"></area-dialog>
    <!-- 修改弹框 -->
    <area-dialog v-if="updateDialogVisible" title="修改区域" :dialogVisible="updateDialogVisible" :areaInfo="areaInfo"
      @close="handleDialogClose"></area-dialog>
  </div>
</template>
<script>

import AreaDialog from "@/components/AreaDialog/index"
import { getAreaListApi, getCommunityListApi, deleteAreaApi } from "@/api/expandarea/expandarealist"
import { getCommunityType } from "@/utils/transform/transform"
import { pcaa } from 'area-data'
import { calcMixin } from "@/utils/mixins/calcMixin"
export default {
  name: "AreaList",
  components: { AreaDialog },
  mixins: [calcMixin],
  data() {
    return {
      isShowSelected: true,
      areaData: {},
      selected: [],
      // 表格数据
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      body: {
        parentName: "",  //地址
        name: ""  //小区
      },
      communityOption: [],
      total: 0,
      // 新增对话框显示标识
      addDialogVisible: false,
      // 修改对话框显示标识
      updateDialogVisible: false,
      // 单行区域信息
      areaInfo: {}
    }
  },
  methods: {
    // 获取小区列表
    async getCommunityList() {
      if (this.selected) {
        this.body.parentName = this.selected.join('')
      }
      const res = await getCommunityListApi(this.requestBody)
      if (res.code === 200) {
        this.communityOption = res.rows
      }
    },
    // 获取区域拓展列表
    async getAreaExpandList() {
      const res = await getAreaListApi(this.queryParams, this.requestBody)
      if (res.code === 200) {
        this.tableData = getCommunityType(res.rows)
        this.total = res.total
      }
    },
    // 删除区域
    async deleteArea(id) {
      const res = await deleteAreaApi(id)
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getAreaExpandList()
      }
    },
    // 查询按钮操作
    handleQuery() {
      this.getAreaExpandList()
    },
    // 重置按钮操作
    resetQuery() {
      this.isShowSelected = false; // 隐藏选择器
      this.$nextTick(() => {
        this.isShowSelected = true; // 重新显示选择器，强制重新渲染
      });
      this.selected = []
      this.body.parentName = "";
      this.communityOption = []
      this.resetForm("queryForm");
      this.getAreaExpandList();
    },
    // 新增按钮操作
    addArea() {
      this.addDialogVisible = true
    },
    // 点击删除按钮操作
    handleDelete(row) {
      this.$confirm('此操作将永久删除该区域, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteArea(row.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEdit(row) {
      this.areaInfo = row
      this.updateDialogVisible = true
    },
    // 切换分页操作
    handlePagination({ page, limit }) {
      this.queryParams = {
        ...this.queryParams,
        pageNum: page,
        pageSize: limit
      }
      this.getAreaExpandList()
    },
    handleDialogClose(data) {
      this.addDialogVisible = data
      this.updateDialogVisible = data
      this.getAreaExpandList()
    },
    changeArea() {
      this.getCommunityList()
    },
  },
  mounted() {
    this.getAreaExpandList()
  },
  created() {
    this.areaData = pcaa
    // 增加新的区
    this.areaData['440300']['440309'] = '龙华区'
  }
}
</script>
<style lang="scss" scoped>
::v-deep .area-select .area-selected-trigger {
  padding-top: 0px;
}

.card-style {
  width: 100%;
  border: 1px solid #e6ebf5;
  padding: 15px 20px 15px 20px;
  border-radius: 4px;
  color: #303133;
  margin-bottom: 20px;

  .search-title {
    padding-left: 6px;
  }
}
</style>